<div class="unwrap">
   <div style="background-image: url(app/img/profile-bg.jpg)" class="bg-cover">
      <div class="p-xl text-center text-white">
         <img src="app/img/user/09.jpg" alt="Image" class="img-thumbnail img-circle thumb128" />
         <h3 class="m0">Ted Berry</h3>
         <p>Lead director</p>
         <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
      </div>
   </div>
   <div class="text-center bg-gray-dark p-lg mb-xl">
      <div class="row row-table">
         <div class="col-xs-4 br">
            <h3 class="m0">400</h3>
            <p class="m0">
               <span class="hidden-xs">Profile</span>
               <span>Views</span>
            </p>
         </div>
         <div class="col-xs-4 br">
            <h3 class="m0">2000</h3>
            <p class="m0">Likes</p>
         </div>
         <div class="col-xs-4">
            <h3 class="m0">100</h3>
            <p class="m0">Following</p>
         </div>
      </div>
   </div>
   <div class="p-lg">
      <div class="row">
         <div class="col-lg-9">
            <!-- START timeline-->
            <ul class="timeline">
               <li data-datetime="Today" class="timeline-separator"></li>
               <!-- START timeline item-->
               <li>
                  <div class="timeline-badge primary">
                     <em class="fa fa-comment"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Aiden Curtis</strong>
                                    </a>posted a comment</p>
                              </div>
                           </div>
                           <p>
                              <em>"Fusce pellentesque congue justo in rutrum. Praesent non nulla et ligula luctus mattis eget at lacus."</em>
                           </p>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <!-- START timeline item-->
               <li class="timeline-inverted">
                  <div class="timeline-badge green">
                     <em class="fa fa-picture-o"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover right">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/04.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>James Payne</strong>
                                    </a>shared a new idea</p>
                              </div>
                           </div>
                           <a href="#">
                              <img src="app/img/mockup.png" alt="Img" class="img-responsive" />
                           </a>
                           <p class="text-muted mv">3 Comments</p>
                           <div class="media bb p">
                              <small class="pull-right text-muted">12m ago</small>
                              <div class="pull-left">
                                 <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32" />
                              </div>
                              <div class="media-body">
                                 <span class="media-heading">
                                    <p class="m0">
                                       <a href="#">
                                          <strong>Aiden Curtis</strong>
                                       </a>
                                    </p>
                                    <p class="m0 text-muted">Hey looks great!</p>
                                 </span>
                              </div>
                           </div>
                           <div class="media bb p">
                              <small class="pull-right text-muted">30m ago</small>
                              <div class="pull-left">
                                 <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb32" />
                              </div>
                              <div class="media-body">
                                 <span class="media-heading">
                                    <p class="m0">
                                       <a href="#">
                                          <strong>Samantha Murphy</strong>
                                       </a>
                                    </p>
                                    <p class="m0 text-muted">Excellento job!</p>
                                 </span>
                              </div>
                           </div>
                           <div class="media bb p">
                              <small class="pull-right text-muted">30m ago</small>
                              <div class="pull-left">
                                 <img src="app/img/user/04.jpg" alt="Image" class="media-object img-circle thumb32" />
                              </div>
                              <div class="media-body">
                                 <span class="media-heading">
                                    <p class="m0">
                                       <a href="#">
                                          <strong>James Payne</strong>
                                       </a>
                                    </p>
                                    <p class="m0 text-muted">WIP guys :)</p>
                                 </span>
                              </div>
                           </div>
                           <form method="post" action="" class="mt">
                              <textarea placeholder="Comment..." rows="1" class="form-control no-resize"></textarea>
                           </form>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- START timeline item-->
               <li>
                  <div class="timeline-badge info">
                     <em class="fa fa-file-o"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Samantha Murphy</strong>
                                    </a>shared new files</p>
                              </div>
                           </div>
                           <ul class="list-unstyled">
                              <li class="pb">
                                 <em class="fa fa-file-o fa-fw mr"></em><a href="#" class="text-info">framework-docs-part1.pdf<em class="pull-right fa fa-download fa-fw"></em></a>
                              </li>
                              <li class="pb">
                                 <em class="fa fa-file-o fa-fw mr"></em><a href="#" class="text-info">framework-docs-part2.pdf<em class="pull-right fa fa-download fa-fw"></em></a>
                              </li>
                              <li class="pb">
                                 <em class="fa fa-file-o fa-fw mr"></em><a href="#" class="text-info">framework-docs-part3.pdf<em class="pull-right fa fa-download fa-fw"></em></a>
                              </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <!-- START timeline item-->
               <li>
                  <div class="timeline-badge purple">
                     <em class="fa fa-map-marker"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Samantha Murphy</strong>
                                    </a>shared new location</p>
                              </div>
                           </div>
                           <p>
                              <em>"Hey guys! Please check the new location for tomorrows's meeting."</em>
                           </p>
                           <div id="map" ng-controller="GMapController">
                              <div ui-map="myMap5" ui-options="mapOptions5" class="gmap"></div>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <!-- START timeline separator-->
               <li data-datetime="Yesterday" class="timeline-separator"></li>
               <!-- END timeline separator-->
               <!-- START timeline item-->
               <li>
                  <div class="timeline-badge success">
                     <em class="fa fa-ticket"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/12.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Dennis Green</strong>
                                    </a>closed issue <a href="#">#548795</a>
                                 </p>
                                 <p class="m0">
                                    <em>&mdash; bootstrap.js needs update</em>
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <li class="timeline-inverted">
                  <div class="timeline-badge warning">
                     <em class="fa fa-ticket"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover right">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/09.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Ted Berry</strong>
                                    </a>assigned
                                    <a href="#" class="text-muted">
                                       <strong>Dennis Green</strong>
                                    </a>to issue <a href="#">#548795</a>
                                 </p>
                                 <p class="m0">
                                    <em>&mdash; bootstrap.js needs update</em>
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <!-- START timeline item-->
               <li>
                  <div class="timeline-badge danger">
                     <em class="fa fa-ticket"></em>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <div class="popover-content">
                           <div class="table-grid table-grid-align-middle mb">
                              <div class="col col-xs">
                                 <img src="app/img/user/10.jpg" alt="Image" class="media-object img-circle thumb48" />
                              </div>
                              <div class="col">
                                 <p class="m0">
                                    <a href="#" class="text-muted">
                                       <strong>Jon Perry</strong>
                                    </a>opened issue <a href="#">#548795</a>
                                 </p>
                                 <p class="m0">
                                    <em>&mdash; bootstrap.js needs update</em>
                                 </p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <!-- END timeline item-->
               <!-- START timeline item-->
               <li class="timeline-end">
                  <a href="#" class="timeline-badge">
                     <em class="fa fa-plus"></em>
                  </a>
               </li>
               <!-- END timeline item-->
            </ul>
            <!-- END timeline-->
         </div>
         <div class="col-lg-3">
            <div class="panel panel-default">
               <div class="panel-body">
                  <div class="text-center">
                     <h3 class="mt0">Ted Berry</h3>
                     <p>Lead director</p>
                  </div>
                  <hr/>
                  <ul class="list-unstyled ph-xl">
                     <li>
                        <em class="fa fa-home fa-fw mr-lg"></em>Somewhere, Neverland</li>
                     <li>
                        <em class="fa fa-briefcase fa-fw mr-lg"></em><a href="#">Themicon.co</a>
                     </li>
                     <li>
                        <em class="fa fa-graduation-cap fa-fw mr-lg"></em>Master Designer</li>
                  </ul>
               </div>
            </div>
            <div class="panel panel-default">
               <div class="panel-heading">
                  <a href="#" class="pull-right">
                     <em class="icon-plus text-muted"></em>
                  </a>Contacts</div>
               <div class="list-group">
                  <!-- START User status-->
                  <a href="#" class="media p mt0 list-group-item">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32" />
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Juan Sims</strong>
                           <br/>
                           <small class="text-muted">Designeer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0 list-group-item">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/06.jpg" alt="Image" class="media-object img-circle thumb32" />
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Maureen Jenkins</strong>
                           <br/>
                           <small class="text-muted">Designeer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0 list-group-item">
                     <span class="pull-right">
                        <span class="circle circle-danger circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/07.jpg" alt="Image" class="media-object img-circle thumb32" />
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Billie Dunn</strong>
                           <br/>
                           <small class="text-muted">Designeer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="#" class="media p mt0 list-group-item">
                     <span class="pull-right">
                        <span class="circle circle-warning circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb32" />
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Tomothy Roberts</strong>
                           <br/>
                           <small class="text-muted">Designer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status--><a href="#" class="media p mt0 list-group-item text-center text-muted">View all contacts</a>
               </div>
            </div>
            <div class="panel panel-default">
               <div class="list-group">
                  <a href="#" class="list-group-item">
                     <em class="pull-right fa fa-users fa-lg fa-fw text-muted mt"></em>
                     <h4 class="list-group-item-heading">1000</h4>
                     <p class="list-group-item-text">Friends</p>
                  </a>
                  <a href="#" class="list-group-item">
                     <em class="pull-right fa fa-rss fa-lg fa-fw text-muted mt"></em>
                     <h4 class="list-group-item-heading">3000</h4>
                     <p class="list-group-item-text">Subscriptions</p>
                  </a>
                  <a href="#" class="list-group-item">
                     <em class="pull-right fa fa-map-marker fa-lg fa-fw text-muted mt"></em>
                     <h4 class="list-group-item-heading">100</h4>
                     <p class="list-group-item-text">Places</p>
                  </a>
                  <a href="#" class="list-group-item">
                     <em class="pull-right fa fa-briefcase fa-lg fa-fw text-muted mt"></em>
                     <h4 class="list-group-item-heading">400</h4>
                     <p class="list-group-item-text">Projects</p>
                  </a>
                  <a href="#" class="list-group-item">
                     <em class="pull-right fa fa-twitter fa-lg fa-fw text-muted mt"></em>
                     <h4 class="list-group-item-heading">17300</h4>
                     <p class="list-group-item-text">Twees</p>
                  </a>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>